<template>
  <div class="sendDig">
    <div class="sendDig__line">
      <span class="sendDig__line--right">订单号</span>
      <span class="sendDig__line--left">{{ detail.prizeOrderId }}</span>
    </div>
    <div class="sendDig__line">
      <span class="sendDig__line--right">创建时间</span>
      <span class="sendDig__line--left">{{ detail.createTime }}</span>
    </div>
    <div class="sendDig__line">
      <span class="sendDig__line--right">地址</span>
      <span class="sendDig__line--left">
        {{ detail.receiverName }},{{ detail.telPhone }},{{ detail.address }}
      </span>
    </div>
    <el-form ref="form" :model="form" label-width="92px">
      <el-form-item label="打印机" required>
        <el-select
          v-model="form.printCode"
          placeholder="选择打印机"
          style="width:370px;margin-left:25px"
        >
          <el-option
            v-for="item of logisticsPrinterVos"
            :key="item.deviceKey"
            :label="item.deviceName"
            :value="item.deviceKey"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="物流公司" required>
        <el-select
          v-model="form.deliverCode"
          placeholder="选择物流公司"
          style="width:370px;margin-left:25px"
        >
          <el-option
            v-for="item of logisticsCompany"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          ></el-option>
        </el-select>
        <el-link
          type="primary"
          :underline="false"
          style="margin-left:4px"
          @click="setDefaultAddress"
          :disabled="deliverCodeBtnStatus"
          >设为默认</el-link
        >
      </el-form-item>
      <el-form-item label="发货地址" required>
        <el-select
          v-model="form.expressId"
          :disabled="!logisticsAddressVos.length"
          placeholder="选择发货地址"
          style="width:370px;margin-left:25px"
        >
          <el-option
            v-for="item of logisticsAddressVos"
            :key="item.code"
            :label="item.address"
            :value="item.expressId"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
// import { getLogistCompany } from "@/api/logistics/logistics";
import {
  setDefaultAddress,
  getLogisticsCompany,
} from "@/api/logistics/logistics";

@Component
export default class SendDeal extends Vue {
  @Prop({
    type: Object,
    default() {
      return {};
    },
  })
  detail: any;

  @Prop({
    type: Boolean,
    default() {
      return false;
    },
  })
  visible: any;

  @Watch("visible")
  getDetail() {
    if (this.visible) {
      this.getCompany();
    }
  }

  form = {
    deliverCode: "",
    expressId: "",
    orderIds: [],
    printCode: "",
  };

  logisticsCompany = [];

  logisticsPrinterVos = [];

  /** 物流公司 */
  deliveComp = "";

  @Watch("logisticsCompany")
  company() {
    this.logisticsCompany.map(item => {
      if (item.isDefault === 1) {
        item.name = item.name + "(默认)";
      }
    });
  }

  get logisticsAddressVos() {
    try {
      const { logisticsExpressAddressVos } = this.logisticsCompany.find(
        item => item.code === this.form.deliverCode,
      );
      return logisticsExpressAddressVos;
    } catch (err) {
      return [];
    }
  }

  get deliverCodeBtnStatus() {
    return (
      !this.form.deliverCode ||
      (this.defLogisticsCompany &&
        this.defLogisticsCompany.code === this.form.deliverCode)
    );
  }

  /** 默认物流公司 */
  get defLogisticsCompany() {
    return this.logisticsCompany.find(item => item.isDefault === 1) || {};
  }

  /** 物流公司变化 设置发货地址列表 */
  @Watch("form.deliverCode")
  onDeliverCodeChnage() {
    this.form.expressId = "";
  }

  /** 运费单号 */
  deliveNum = "";

  mounted() {
    this.getCompany();
  }

  /**
   * 获取物流公司
   */
  async getCompany() {
    const res = await getLogisticsCompany({});
    this.logisticsCompany = res.data.logisticsCompanyVos;
    this.logisticsPrinterVos = res.data.LogisticsPrinterVos;
    this.logisticsCompany.forEach(item => {
      if (item.isDefault === 1) {
        this.form.deliverCode = item.code;
      }
    });
  }

  /** 设置默认发货公司 */
  setDefaultAddress() {
    const { logisticsCompanyId } = this.logisticsCompany.find(
      item => item.code === this.form.deliverCode,
    );
    setDefaultAddress(logisticsCompanyId)
      .then(() => {
        this.getCompany();
        this.$message.success("设置成功");
      })
      .catch(err => {
        this.$message.warning(err);
      });
  }

  /**
   * 选择物流公司
   */
  changeSel(e) {
    this.deliveComp = e;
  }
}
</script>

<style lang="scss" scoped>
@include b(sendDig) {
  padding: 20px;
  @include e(line) {
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 20px;
    @include m(right) {
      display: flex;
      width: 80px;
      justify-content: flex-end;
    }
    @include m(left) {
      margin-left: 40px;
    }
  }
}
</style>
